<template>
	<view>
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item><image mode="aspectFill" src="../../static/img/index1.jpg"></image></swiper-item>
			<swiper-item><image mode="aspectFill" src="../../static/img/index2.jpg"></image></swiper-item>
			<swiper-item><image mode="aspectFill" src="../../static/img/index3.jpg"></image></swiper-item>
		</swiper>
		<view class="uni-flex uni-row uni-common-mt uni-common-mb uni-center">
			<view class="uni-flex-item uni-flex uni-column" @click="condition">
				<text class="iconfont">&#xe63c;</text>
				<!-- <text :style="fontObject">病情推测</text> -->
				<text type="default" :style="fontObject">病情推测</text>
			</view>
			<view class="uni-flex-item uni-flex uni-column" @click="ranking">
				<text class="iconfont">&#xe7fe;</text>
				<text :style="fontObject">医院排名</text>
			</view>
			<view class="uni-flex-item uni-flex uni-column" @click="region">
				<text class="iconfont">&#xe713;</text>
				<text :style="fontObject">医院分布</text>
			</view>
		</view>
		<uni-list id="news_list" loadmoreoffset="10rpx">
			<uni-list-item v-for="(item, index) in newsList" :key="index"
			 :title="item.title" @click="showLittleKnow(item.id)"></uni-list-item>
		</uni-list>
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
/*
self 保存当前vue实例
page 保存当前页面在第几页
*/
var _self,
	page = 1;

export default {
	data() {
		return {
			status: 'more', // 新闻列表的状态 more还有更多 loading正在加载 noMore没有了
			newsList: [], // 保存新闻列表
			indicatorDots: true, // 轮播图是否显示导航点
			autoplay: true, // 轮播图是否自动播放
			interval: 2500, // 播放间隙
			duration: 500,
			fontObject: {
				// 页面的字体设计
				fontSize: '12rpx',
				color: 'black'
			}
		};
	},
	onLoad() {
		// 页面加载监听
		_self = this; // 保存vue实例
		_self.getNewList(); // 获取一页新闻实例
		// this.checkLogin();	// 检查登录状态
	},
	onReachBottom: function() {
		// 监听是否滑倒页面底部，滑到就去加载新的一页新闻列表
		_self.status = 'loading';
		_self.getMoreNews();
	},
	methods: {
		showLittleKnow: function(index) {
			uni.navigateTo({
				url: 'littleknow/littleknow?id=' + index
			});
		},
		region: function() {
			uni.navigateTo({
				url: 'region/region'
			});
		},
		ranking: function() {
			uni.navigateTo({
				url: 'ranking/ranking'
			});
		},
		condition: function() {
			uni.navigateTo({
				url: 'condition/condition'
			});
		},
		// 获取新的一页数据
		getNewList: function() {
			page = 1;
			_self.status = 'loading';
			
			uni.request({
				url: _self.websiteUrl + '/article/page',
				method: 'GET',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					"page": page,
					"size": 25
				},
				success: (t) => {
					const result = t.data.payload
					if (t.data.status === 200) {
						_self.newsList = result.records
						if (result.current < result.pages) {
							_self.status = 'more';
						} else {
							_self.status = 'noMore';
						}
					} else {
					}
				},
				fail: (t) => {
					_self.status = 'noMore';
				}
			})
			
		},
		getMoreNews: function() {
			page++;
			
			uni.request({
				url: _self.websiteUrl + '/article/page',
				method: 'GET',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					"page": page,
					"size": 25
				},
				success: (t) => {
					const result = t.data.payload
					if (t.data.status === 200) {
						_self.newsList = _self.newsList.concat(result.records)
						if (result.current < result.pages) {
							_self.status = 'more';
						} else {
							_self.status = 'noMore';
						}
					} else {
					}
				},
				fail: (t) => {
					_self.status = 'noMore';
				}
			})
			
		}
	},
	components: { uniList, uniListItem, uniLoadMore },
	mounted() {},
	created() {
		// 向缓存中添加数据，模拟登录状态
		// uni.setStorageSync('uId', '1'	);
		// 获取定位，通过心知天气来获取天气信息
		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				uni.request({
					url: 'https://api.seniverse.com/v3/weather/now.json?key=SqE2rdo17W8IK8Mk6&language=zh-Hans&unit=c&location=31.76:116.48',
					complete: function(obj) {
						// console.log(JSON.stringify(obj.data));
						uni.showModal({
							title: '当前天气',
							content: JSON.stringify(obj.data)
						});
					}
				});
			}
		});
		uni.onTabBarMidButtonTap(res => {
			uni.navigateTo({
				url: '/pages/index/editor/editor'
			});
		})
	},
	onPullDownRefresh() {
		// 下拉刷新
		_self.getNewList();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	}
};
</script>

<style>
.swiper {
	height: 350upx;
}

.swiper swiper-item image {
	width: 100%;
}
@font-face {
	font-family: 'iconfont';
	src: url('~@/static/iconfont.ttf') format('truetype');
}
.iconfont {
	font-family: 'iconfont' !important;
	font-size: 30px;
	font-style: normal;
	color: black;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
</style>
